<!-- 
  @description: [待办]页面
-->
<template>
  <L-HeaderAsideMainLayout>
    <template #header>
      <div class="todo-header border-box">
        <L-Input
          ref="input"
          @submit="addItem"
          :customStyle="{
            width: '45%',
            height: '60px',
            fontSize: '20px',
          }"
        ></L-Input>
        <!-- 选择分类 -->
        <L-CategorySelect @categoryClick="categoryClick"></L-CategorySelect>
      </div>
    </template>
    <template #aside>
      <div class="todo-aside border-box">
        <L-TabsSelect
          ref="tabsSelect"
          @tabsChange="tabsChange"
          :activeName="activeName"
        ></L-TabsSelect>
      </div>
    </template>
    <template #main>
      <div class="todo-main border-box">
        <!-- height: calc(100vh - 顶栏高度 - 留白高度) -->
        <L-TodoList
          :todoList="todoList"
          :customStyle="{
            width: '80%',
            height: 'calc(100vh - 200px - 100px)',
          }"
          @confirmUpdate="confirmUpdate"
          @delItem="delItem"
          @finish="finish"
        ></L-TodoList>
      </div>
    </template>
  </L-HeaderAsideMainLayout>
</template>

<script setup lang="ts">
import { useStore } from '../store/index'
import {
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
} from 'vue'
import { TodoTab, Todo } from '../types/TodoType'
import TabsSelect from '../components/Todo/TabsSelect.vue'
import { ElMessageBox, ElMessage } from 'element-plus'

const { proxy }: any = getCurrentInstance()
const input = ref<any>(null)
const tabsSelect = ref<any>(null)
const store: any = useStore()

let activeName = ref('Study')
let selectCategory = ref('')
let todoList: Array<Todo> = reactive([])
let todo: Todo = reactive({
  content: '',
  category: '',
  tag: '',
  id: 0,
  isEdit: false,
  emergency: '',
  isFinish: '否',
})

onMounted(() => {
  getList()
})

function refreshData() {
  // 刷新待办数量
  tabsSelect.value.getTodoTabs()
  // getList()
}

// 增
async function addItem(inputValue: string) {
  setTodoData(inputValue)

  const { data: res } = await proxy.$http.post('/todo/add', todo)
  if (res.isSuccess) {
    ElMessage({
      message: res.message,
      grouping: true,
      type: 'success',
    })
    input.value.clearInput()

    // 新增后，切换到对应分类
    tabsSelect.value.changeTodoTabs(selectCategory.value)
    // 刷新数据
    refreshData()
  }
}

// 构造待办请求体
function setTodoData(inputValue: string) {
  todo.content = inputValue
  todo.category = selectCategory.value
}

// 选项卡切换
function tabsChange(category: string) {
  activeName.value = category
  getList(activeName.value)
}

// 查
async function getList(category: string = activeName.value) {
  const { data: res } = await proxy.$http.get('/todo/list', {
    params: {
      category,
    },
  })

  // 清空数组
  if (res.isSuccess) {
    todoList.length = 0
    res.data.forEach((item: any) => {
      item.isEdit = false
      todoList.push(item)
    })
  }
}

// 删
function delItem(id: Number) {
  ElMessageBox.confirm('确认删除吗？', '注意', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(async () => {
    const { data: res } = await proxy.$http.delete('/todo/delete', {
      params: {
        id,
      },
    })
    if (res.isSuccess) {
      ElMessage({
        message: res.message,
        grouping: true,
        type: 'success',
      })
      refreshData()
    }
  })
}

function confirmUpdate(obj: Todo) {
  for (let item of todoList) {
    if (item.id === obj.id) {
      item.isEdit = false
      updateItem(item)
      break
    }
  }
}

function finish(obj: Todo) {
  ElMessageBox.confirm('确认完成吗？', '注意', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(() => {
    finishTodo(obj.id)
  })
}

// 改
async function updateItem(todo: Todo) {
  const { data: res } = await proxy.$http.put('/todo/update', todo)
  if (res.isSuccess) {
    ElMessage({
      message: res.message,
      grouping: true,
      type: 'success',
    })
    refreshData()
  }
}

// 完成
async function finishTodo(id: number) {
  const { data: res } = await proxy.$http.put('/todo/finish', {
    id,
  })
  if (res.isSuccess) {
    ElMessage({
      message: res.message,
      grouping: true,
      type: 'success',
    })
    refreshData()
    closeConcentrate()
  }
}

function categoryClick(content: string) {
  selectCategory.value = content
}

// 关闭专注模式
function closeConcentrate() {
  const UN_CONCENTRATE = 0
  store.setIsConcentrate(UN_CONCENTRATE)
}
</script>

<style lang="less" scoped>
.border-box {
  box-sizing: border-box;
}
.todo-aside {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-end;

  .TodoTabs {
    margin: 10px 0;

    &:first-child {
      margin: 0 0 10px 0;
    }
  }
}

.todo-header {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.todo-main {
  width: 100%;
  height: 100%;
  padding: 0 50px;
}
</style>
